<template>
  <div class="tema-page">
    <van-nav-bar :title="isMy?'我的团队':'他的团队'" left-arrow @click-left="onClickLeft" fixed />
    <div class="page-content">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <item-card v-for="(item,index) in subAgents" :key="index" :item="item" @click.native="toNext(item)"></item-card>
      </van-list>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Cell, CellGroup, Tab, Sticky, Icon, Toast, List } from "vant";
import itemCard from './item-card'
Vue.use(Tab)
  .use(Sticky)
  .use(Cell)
  .use(CellGroup)
  .use(NavBar)
  .use(List)
  .use(Icon);
export default {
  data() {
    return {
        isMy: true,
        subAgents: [],
        parentId: this.$route.query.parentId,
        pageNum: 1,
        pageSize: 10,
        loading: true,
        finished: false,
    };
  },
  components:{
      itemCard
  },
  watch:{
      $route(to,from){
        this.pageNum = 1
        this.pageSize = 10
        this.subAgents = []
        this.parentId = this.$route.query.parentId
          if(to.query.parentId){
              this.isMy = false
          }else{
              this.isMy = true
          }
        this.getSubAgents()
      }
  },
  mounted(){
    this.getSubAgents()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toNext(item) {
      if(item.teams || item.directTeams){
        this.$router.push({path:'/vip/team',query:{parentId:item.memberId}})
      }
    },
    getSubAgents() {
      const params = {
        parentId: this.parentId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.$http
        .post("/account/subAgents", params)
        .then(res => {
          this.subAgents = this.subAgents.concat(res.info)
          if(res.page >= res.totalpage) {
            this.finished = true
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(error => {
          Toast(error.message)
        });
      
    },
    onLoad(){
      this.pageNum += 1
      this.getSubAgents()
    }
  }
};
</script>
<style lang="scss" scoped>
.tema-page {
  .page-content {
    padding-top: 66px;
  }
}
</style>